// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager, Platform } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Grid } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { bindLogin } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RefreshScrollView } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, initUser, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage, WeChatLogin } from '../../util/utils.js'

class User extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false
    }
  }

  componentDidMount() {
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    initUser().then(res => {
      this.setState({
        refreshing: false
      })
    }).catch(error => {
      this.setState({
        refreshing: false
      })
    })
  }

  WeChatLogin() {
    const { dispatch } = this.props
    WeChatLogin().then(res => {
      console.log(res)
      bindLogin(res.data).then(wx => {
        console.log(wx)
        Toast.info('绑定成功')
        this.onRefresh()
      }).catch(error => {
        console.log(error)
        Toast.info('绑定失败')
      })
    })
  }

  render() {
    const { user, coin, cv, integral } = this.props
    const { refreshing } = this.state
    return (
      <View style={[Style.container, { backgroundColor: '#F9F9F9' }]}>
        <Status type="light-content" backgroundColor="#000000" />
        {user && (
          <RefreshScrollView
            style={Style.content}
            refreshing={refreshing}
            onRefresh={this.onRefresh}
          >
            <TouchableOpacity
              style={{
              }}
              onPress={() => {
                Actions.setting()
              }}
            >
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                paddingVertical: 30,
                paddingBottom: 60,
                paddingRight: 15,
                backgroundColor: '#000000'
              }}>
                <View style={{
                  borderRadius: 30,
                  overflow: 'hidden',
                  marginHorizontal: 15
                }}>
                  <CacheImage
                    resizeMod={"contain"}
                    style={{
                      width: 60,
                      height: 60,
                    }}
                    source={{ uri: `${pathHead}${user.avatar}` }}
                  />
                </View>
                <View style={{ flex: 1 }}>
                  <View style={{ marginBottom: 10, flexDirection: 'row', alignItems: 'center', }}>
                    <Text style={{ fontSize: 18, color: '#fff', lineHeight: 22, fontWeight: 'bold', }}>{user.nickname}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>  </Text>
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>{user.levelName}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>  </Text>
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>{user.agentName}</Text>
                  </View>
                  <View style={{}}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, marginRight: 10 }}>邀请码</Text>
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>{user.invitationCode}</Text>
                    </View>
                  </View>
                </View>
                <Icon name="angle-right" size={40} color={'#fff'} />
              </View>
            </TouchableOpacity>

            <View style={{
              marginHorizontal: 15,
              marginTop: -30,
              marginBottom: 10,
              backgroundColor: '#fff',
              borderRadius: 6,
              overflow: 'hidden',
              borderWidth: .5,
              borderColor: '#D9D9D9',
              flexDirection: 'row',
              alignItems: 'center',
            }}>
              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.integral()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>{integral.integral}</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>积分</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.coinList()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>{coin.coin}</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>分身币</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.cvList()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>{cv.cv}</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>CV</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.integralRanking()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>积分</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>排行榜</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.cvRanking()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>CV</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>排行榜</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                style={{
                  flex: 1,
                }}
                onPress={() => {
                  Actions.coinRanking()
                }}
              >
                <View style={{
                  paddingVertical: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 20, }}>分身币</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 20, }}>排行榜</Text>
                </View>
              </TouchableOpacity>
            </View>
            <View style={{
              marginHorizontal: 15,
              marginBottom: 10,
              backgroundColor: '#fff',
              borderRadius: 6,
              overflow: 'hidden',
              borderWidth: .5,
              borderColor: '#D9D9D9'
            }}>
              <View style={{
              }}>
                <TouchableOpacity
                  onPress={() => {
                    Actions.order()
                  }}
                >
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingHorizontal: 15
                  }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>我的订单</Text>
                    <Icon name="angle-right" size={14} color={'#61676F'} />
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
              <Grid
                data={[
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/daifukuan.png')} />,
                    text: '待付款'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/daifahuo.png')} />,
                    text: '待发货'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/daishouhuo.png')} />,
                    text: '待收货'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/yiwancheng.png')} />,
                    text: '已完成'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/yiquxiao.png')} />,
                    text: '已取消'
                  },
                ]}
                columnNum={5}
                hasLine={false}
                onPress={(el, index) => {
                  Actions.order({ id: index + 1 })
                }}
              />
            </View>
            <View style={{
              marginHorizontal: 15,
              marginBottom: 10,
              backgroundColor: '#fff',
              borderRadius: 6,
              overflow: 'hidden',
              borderWidth: .5,
              borderColor: '#D9D9D9'
            }}>
              <View style={{
              }}>
                <TouchableOpacity
                  onPress={() => {
                    // Actions.order()
                  }}
                >
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingHorizontal: 15
                  }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>我的圈子</Text>
                    {/* <Icon name="angle-right" size={14} color={'#61676F'} /> */}
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
              <Grid
                data={[
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodetiezi.png')} />,
                    text: '我的帖子'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodeshouceng.png')} />,
                    text: '我的收藏'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodefensi.png')} />,
                    text: '我的粉丝'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodedianzan.png')} />,
                    text: '我的点赞'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/guanzhuderen.png')} />,
                    text: '关注的人'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/guanzhudebankuai.png')} />,
                    text: '关注的板块'
                  },
                  user.externalLogin ? {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={{ uri: `${user.externalLogin.headimgurl}` }} />,
                    text: user.externalLogin.nickname
                  } :
                    {
                      icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={{ uri: `${pathHead}${user.avatar}` }} />,
                      text: '未绑定'
                    },
                ]}
                columnNum={4}
                hasLine={false}
                onPress={(el, index) => {
                  if (index == 0) {
                    // 我的帖子
                    Actions.cardMyList()
                  }
                  if (index == 1) {
                    // 我的收藏
                    Actions.collectionCard()
                  }
                  if (index == 2) {
                    // 我的粉丝
                    Actions.fansList()
                  }
                  if (index == 3) {
                    // 我的点赞
                    Actions.likeCard()
                  }
                  if (index == 4) {
                    // 关注的人
                    Actions.followAccount()
                  }
                  if (index == 5) {
                    // 关注的板块
                    Actions.followPlate()
                  }
                  if (index == 6) {
                    // 绑定微信
                    if (!user.externalLogin) {
                      this.WeChatLogin()
                    }
                  }
                }}
              />
            </View>

            <View style={{
              marginHorizontal: 15,
              marginBottom: 10,
              backgroundColor: '#fff',
              borderRadius: 6,
              overflow: 'hidden',
              borderWidth: .5,
              borderColor: '#D9D9D9'
            }}>
              <View style={{
              }}>
                <TouchableOpacity>
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingHorizontal: 15
                  }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>分身服务</Text>
                    <Icon name="angle-right" size={14} color={'#61676F'} />
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
              <Grid
                data={[
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodeqinren.png')} />,
                    text: '我的亲人'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodedizhi.png')} />,
                    text: '我的地址'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/woyaodaili.png')} />,
                    text: '我要代理'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/yaoqionghaoyou.png')} />,
                    text: '邀请好友'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/fapiaoguanlia.png')} />,
                    text: '发票管理'
                  },
                  {
                    icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/wodetuandui.png')} />,
                    text: '我的团队'
                  },
                ]}
                columnNum={4}
                hasLine={false}
                onPress={(_el, index) => {
                  // 我的亲人
                  if (index == 0) {
                    Actions.myRelatives()
                    return
                  }
                  // 我的地址
                  if (index == 1) {
                    Actions.address()
                    return
                  }
                  // 我要代理
                  if (index == 2) {
                    Actions.agentProduct()
                    return
                  }
                  // 邀请好友
                  if (index == 3) {
                    Actions.inviteFriends()
                    return
                  }
                  // 发票
                  if (index == 4) {
                    Actions.invoice()
                    return
                  }
                  // 团队
                  if (index == 5) {
                    Actions.team()
                    return
                  }
                  Toast.info('该功能未开放', 1)
                }}
              />
            </View>
            {Platform.OS != 'ios' && (

              <View style={{
                marginHorizontal: 15,
                marginTop: 10,
                backgroundColor: '#fff',
                borderRadius: 6,
                overflow: 'hidden',
                borderWidth: .5,
                borderColor: '#D9D9D9',
                marginBottom: 20
              }}>
                <View style={{
                }}>
                  <TouchableOpacity>
                    <View style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      paddingHorizontal: 15
                    }}>
                      <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>发现</Text>
                      <Icon name="angle-right" size={14} color={'#61676F'} />
                    </View>
                  </TouchableOpacity>
                </View>
                <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
                <Grid
                  data={[
                    {
                      icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/zhinengyangjian.png')} />,
                      text: '智能硬件'
                    },
                  ]}
                  columnNum={4}
                  hasLine={false}
                  onPress={(_el, index) => {
                    // 智能硬件
                    if (index == 0) {
                      Actions.data()
                      return
                    }
                    // Toast.info('该功能未开放', 1)
                  }}
                />
              </View>
            )}
            <Text style={{ fontSize: 10, color: '#666', lineHeight: 14, textAlign: 'center', marginBottom: 5, }}>Copyright@2019-2020</Text>
            <Text style={{ fontSize: 10, color: '#666', lineHeight: 14, textAlign: 'center', marginBottom: 15 }}>分身购 fungo.ai 版权所有</Text>
          </RefreshScrollView>
        )}
      </View >
    );
  }
}


export default connect(({ user, coin, cv, integral }) => ({
  user, coin, cv, integral
}))(pureRender(User))
